<template>
  <div>
    <el-dialog title="学生登录" v-model="dialogFormLoginStatus" @close="closeDialog" width="25%" center>
      <el-form ref="loginForm" :rules="loginRules" :model="loginForm" class="form-login" v-loading="loading"
        element-loading-text="正在登录……">
        <el-form-item prop="stuId">
          <el-input style="background: #eef3f5" placeholder="请输入账号" v-model="loginForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input style="background: #eef3f5" placeholder="请输入6~12位的密码" v-model="loginForm.password" autocomplete="off"
            type="password"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button style="width: 100%" type="primary" round @click="loginClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "login-box",
  data() {
    return {
      dialogFormLoginStatus: false,
      loginRules: {
        username: [{ required: true, trigger: "blur", message: "请输入账号" }],
        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
      },
      loading: false,
      loginForm: {
        username: "15231582268",
        password: "15231582268",
      },
    };
  },
  computed: {
    dialoglogin() {
      return this.$store.state.dialog.login;
    },
  },
  watch: {
    dialoglogin(val) {
      this.dialogFormLoginStatus = val;
    },
    deep: true,
  },
  methods: {
    // 关闭登录面板
    closeDialog() {
      this.$store.dispatch("dialog/setlogin", false);
    },
    // 点击登录按钮
    loginClick() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || "/" });
              this.loading = false;
              this.$store.dispatch("user/getInfo", false);
              this.$store.dispatch("dialog/setlogin", false);
            })
            .catch((err) => {
              this.$message.error(err);
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style >
.form-login .el-input__inner {
  height: 45px;
  line-height: 45px;
  background: #eef3f5;
}
</style>
